<script setup lang="ts">
import {ShallowRef} from "vue";

import {Object3D} from "three";

import EditToolStructTree from './EditToolStructTree.vue'
import EditToolButton from './EditToolButton.vue'
import EditToolTransform from './EditToolTransform.vue'
import EditToolModelData from './EditToolModelData.vue'

// 当前编辑对象
const editObject = inject<ShallowRef<Object3D | null>>('editObject')!

</script>

<template>
  <!-- 立体凹陷效果 -->
  <div class="h-100 bg-gray-100 shadow-[inset_0_0_8px_0_rgba(0,0,0,0.15)] rounded-lg p-2">
    <el-scrollbar>
      <EditToolStructTree />
    </el-scrollbar>
  </div>

  <EditToolButton class="mt-4" />

  <!-- 使用key进行强制重建 -->
  <el-scrollbar v-if="editObject" :key="editObject.uuid" class="mt-4" >
    <el-space direction="vertical" alignment="normal" :size="16">
      <EditToolTransform />
      <EditToolModelData />
    </el-space>
  </el-scrollbar>
</template>

<style scoped lang="scss">

</style>
